<template>
	<view>
		<view class="top">
			<view class="test">
				<image src="../../static/icon/jss.png" mode=""></image>
				{{date}}
			</view>
			<view class="btn" v-if="confirm == '0'" @click="handleConfirm" >
				确认账单
			</view>
			<view class="btn1" v-else>
				已确认
			</view>
		</view>

		<view class="ulist">
			<view class="item" v-for="(item,index) in List" :key="index">
				<view class="item_top">
					<view class="flex_b">
						<image src="/static/icon/shop.png" mode=""></image>
						{{item.shopName}}
					</view>
					<view class="flex_r">
						<span>￥</span>
						{{item.amountIncome}}
					</view>
				</view>
				<view class="ites_flex">
					<view class="ites">
						<view class="">交易金额</view>
						<view class="price">
							<span>￥</span>
							{{item.amountOrder}}
						</view>
					</view>
					<view class="ites">
						<view class="">有效金额</view>
						<view class="price">
							<span>￥</span>
							{{item.amountPay}}
						</view>
					</view>
					<view class="ites">
						<view class="">退款金额</view>
						<view class="price">
							<span>￥</span>
							{{item.amountRefund}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 100rpx;">
			
		</view>
		<view class="kong" v-if="nolist">
			<view class="">
				<image src="/static/user/k.png" mode=""></image>
				<view class="ts">
					尚无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		customerOrderListInfo,customerOrderListConfirm
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				params: {
					pageNum: 1,
					pageSize: 10,
					month: ''
				},
				List: [],
				nolist: false,
				date:'',
				confirm:'0'
			};
		},
		onLoad(option) {
			this.date = this.insertchar(option.month, 4)
			this.params.month = option.month
			this.confirm = option.confirm
			console.log(option,this.date);
			this.getList()
			uni.setNavigationBarTitle({
				title: option.month.substring(4) + '月账单明细'
			})
		},
		onReachBottom() {
			this.params.pageNum++
			this.getList()
		},
		methods: {
			handleConfirm(){
				customerOrderListConfirm({month:this.params.month}).then(res=>{
					console.log(res);
					if(res.code == 200){
						uni.showToast({
							title: '账单已确认',
							icon: 'none'
						})
						this.confirm = '1'
					}
				})
			},
			insertchar(oldStr, index) {
				return oldStr.slice(0, index) + '年' + oldStr.slice(index)+ '月'
			},
			getList() {
				customerOrderListInfo(this.params).then(res => {
					this.List.push(...res.rows)
					let total = Math.ceil(res.total / this.params.pageSize);
					this.nolist = total == 0
				})
			},
		}
	}
</script>

<style lang="scss">
	.kong {
		width: 100%;
		margin: 230rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		image {
			width: 228rpx;
			height: 228rpx;
		}

		.ts {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;
			margin-top: 20rpx;
		}
	}

	.top {
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: sticky;
		top: 0%;
		background: #ffffff;

		.test {
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}
		}

		.btn1 {
			width: 160rpx;
			height: 64rpx;
			background: #F3F3F3;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #979797;
			line-height: 64rpx;
			text-align: center;
		}

		.btn {
			width: 160rpx;
			height: 64rpx;
			background: #000000;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 64rpx;
			text-align: center;
		}

	}

	.ulist {
		.item {
			width: 710rpx;
			margin: 0rpx auto 20rpx;
			box-sizing: border-box;
			border-top: 1px solid #eee;
			padding-top: 20rpx;

			.item_top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 15rpx;
				}

				.flex_r {
					font-family: 'DINB';
					font-size: 40rpx;
					color: #29A85C;

					span {
						color: #29A85C;
						font-weight: bold;
						font-size: 24rpx;
					}
				}
			}

			.ites_flex {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;

				.ites {
					text-align: center;
				}

				.price {
					font-family: 'DINB';
					font-size: 40rpx;
					color: #000000;
					margin-top: 20rpx;

					span {
						color: #000000;
						font-weight: bold;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>